<template lang="pug">
  div.dialog(@click.self="clickBtnDefault")
    div.dialog-container
      div.avatar(:style="avatarStyle")
      div.mn
        div.btn-close(@click.stop="clickBtnDefault")
          i.el-icon-close
        div.tt {{title}}
        div.cnt(v-html="html")
</template>

<script type="text/ecmascript-6">
export default {
  name: 'KalixPopupMsg',
  props: {
    avatar: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    html: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 推荐操作按钮
     *  {
       *    text:'显示文字',
       *    callBack:回调函数
       *  }
     */
    btnPrimary: {
      type: Object,
      default() {
        return {
          text: '关闭',
          callBack() {
          }
        }
      }
    },
    /**
     * 辅助操作按钮显示文字
     *  {
       *    text:'显示文字',
       *    callBack:回调函数
       *  }
     */
    btnDefault: {
      type: Object,
      default() {
        return {
          text: '返回',
          callBack() {
          }
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 辅助操作按钮点击事件
     */
    clickBtnDefault() {
      if (this.btnDefault.callBack && typeof (this.btnDefault.callBack) === 'function') {
        this.btnDefault.callBack(this)
      }
    }
  },
  computed: {
    avatarStyle() {
      return {'background-image': `url('${this.avatar}')`}
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .dialog
    position fixed
    z-index 2000
    top 0
    left 0
    width 100%
    height 100%
    display flex
    justify-content center
    align-items center
    background-color rgba(0, 0, 0, .4)
    .dialog-container
      background-color #fff
      padding 12px
      border 1px solid #dcdfe6
      box-shadow 0 0 8px 5px rgba(0, 0, 0, 0.28)
      display flex
      position relative
      width 600px

      .avatar
        width 120px
        height 168px
        background 50% 50% no-repeat
        background-size cover
        border 1px solid #DCDFE6
      .mn
        flex 1
        margin-left 12px
        .tt
          font-size 16px
          padding-bottom 8px
          line-height 30px
          border-bottom 1px solid #DCDFE6
          margin-bottom 8px
        .cnt
          font-size 14px
          line-height 24px
      .btn-close
        position absolute
        top -1px
        right -1px
        width 36px
        height 36px
        text-align center
        line-height 36px
        background-color #F56C6C
        color #ffffff
        cursor pointer
    .tb
      font-size 14px
      margin-bottom 8px
    .tb-tab
      width 100%
      border 1px solid #DCDFE6
      overflow hidden
      .tb-cell
        float left
        width 50%
        padding 8px 12px
        box-sizing border-box
        position relative
        &:after,
        &:before
          display block
          position absolute
          content ''
          background-color #DCDFE6
          visibility hidden
          top 0
        &:after
          left 0
          width 200%
          height 1px
        &:before
          right 0
          height 100%
          width 1px
        &:nth-child(2n+1)
          &:after
            visibility visible
          &:before
            visibility visible
        &:nth-child(1)
          &:after
            visibility hidden
        .tb-lab
          color #909399
        .tb-cnt
          font-size 15px
          color #303133

</style>
